<template>
	<!-- 主副标题 -->
	<view class="diy-guide" :style="[{'background': background },{'padding-left':paddingLeft},{'padding-right':paddingLeft}]">
		<view v-if="itemStyle.lineStyle == 'lineStyle1'" class="diy-thetitle" :style="{padding: itemStyle.paddingTop +'px '+'0', background:itemStyle.background }">
			<view style="text-align: center;">
				<view style="display: inline-block;width: 15px;height: 2px;vertical-align: 5px;" :style="{background: itemStyle.lineColor}"></view>
				<view style="display: inline-block;color: #434343;margin:0 10px;line-height: 20px;" :style="{color: itemStyle.zhutitlecolor,fontSize:itemStyle.zhutitlesize+'px'}">{{itemStyle.zhutitle}}</view>
				<view style="display: inline-block;width: 15px;height: 2px;vertical-align: 5px;" :style="{background: itemStyle.lineColor}"></view>
			</view>
			<view class="text_hide" style="line-height:14px;margin-top: 8px;text-align: center;" :style="{color: itemStyle.futitlecolor,fontSize : itemStyle.futitlesize+'px'}">{{itemStyle.futitle}}</view>
		</view>


		<view v-if="itemStyle.lineStyle == 'lineStyle2'" class="diy-thetitle" :style="{padding: itemStyle.paddingTop +'px '+'0', background:itemStyle.background,paddingLeft:itemStyle.marginLeft +'px' }">
			<view style="line-height: 14px" :style="{color: itemStyle.zhutitlecolor,fontSize:itemStyle.zhutitlesize+'px'}">
				<span style="width: 2px;display: inline-block;margin-right: 5px;vertical-align: -2px;" :style="{background: itemStyle.lineColor,height:itemStyle.zhutitlesize+'px'}"></span>
				{{itemStyle.zhutitle}}
			</view>
			<view style="line-height: 12px;margin-top: 8px" :style="{color: itemStyle.futitlecolor,fontSize : itemStyle.futitlesize+'px'}">{{itemStyle.futitle}}</view>
		</view>

		<view v-if="itemStyle.lineStyle == 'lineStyle3'" class="diy-thetitle" :style="{padding: itemStyle.paddingTop +'px '+'0', background:itemStyle.background,paddingLeft:itemStyle.marginLeft +'px' }">
			<view style="line-height: 14px" :style="{color: itemStyle.zhutitlecolor,fontSize:itemStyle.zhutitlesize+'px'}">
				<span style="width: 2px;display: inline-block;margin-right: 5px;vertical-align: -2px;" :style="{background: itemStyle.lineColor,height:itemStyle.zhutitlesize+'px'}"></span>
				{{itemStyle.futitle}}
				<span style="line-height: 12px;margin-left: 5px" :style="{color: itemStyle.futitlecolor,fontSize : itemStyle.futitlesize+'px'}">{{itemStyle.futitle}}</span>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		computed: {
			paddingTop() {
				return uni.upx2px(this.itemStyle.paddingTop * 2) + 'px';
			},
			background() {
				return this.itemStyle.background;
			},
			paddingLeft() {
				return uni.upx2px(0) + 'px';
			},
			line() {
				return uni.upx2px(this.itemStyle.lineHeight * 2) + 'px' + ' ' + this.itemStyle.lineStyle + ' ' + this.itemStyle.lineColor;
			}
		},
		props: {
			itemStyle: {}
		}
	}
</script>

<style>
	.diy-guide .line {
		width: 100%;
	}
</style>
